<template>
  <div>
    <div class="feedback" :class="change === true ? 'on' : ''">
      <div class="feedback-header acea-row">
        <span class="sp1">商城客服已离线</span>
        <div>
          <i class="el-icon-close" style="font-size: 18px" v-db-click @click="close"></i>
        </div>
      </div>
      <div v-if="!isShow">
        <div class="feedback-conent mb20">
          <div class="ft" v-text="notice"></div>
        </div>
        <div>
          <el-form :model="formItem" ref="formItem" class="pl15" :rules="ruleValidate">
            <el-form-item prop="rela_name">
              <el-input v-model="formItem.rela_name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="formItem.phone" placeholder="请输入您的联系电话"></el-input>
            </el-form-item>
            <el-form-item prop="content">
              <el-input v-model="formItem.content" class="mb10" type="textarea" placeholder="请输入留言内容"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-db-click @click="handleSubmit('formItem')" style="width: 100%">提交留言</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="sure" v-if="isShow">
        <div class="sure-yuan"></div>
        <div class="sp1 mb10">提交成功</div>
        <div class="sp2 mb30">您的信息提交成功，我们会尽快与您取得联系！</div>
        <el-button type="primary" v-db-click @click="close">好的</el-button>
      </div>
    </div>
    <div class="maskModel" @touchmove.prevent v-show="change === true"></div>
  </div>
</template>

<script>
import { feedbackDataApi, feedbackFromApi } from '@/api/kefu';
export default {
  name: 'feedback',
  props: {
    change: Boolean,
  },
  data() {
    return {
      isShow: false,
      formItem: {
        rela_name: '',
        content: '',
        phone: '',
      },
      notice: '',
      ruleValidate: {
        rela_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
        content: [{ required: true, message: '请输入留言内容', trigger: 'blur' }],
        phone: [
          { required: true, message: '请填写手机号码', trigger: 'change' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
    this.getNotice();
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          feedbackFromApi(this.formItem)
            .then((res) => {
              this.isShow = true;
            })
            .cache((err) => {
              this.$message.error(err.msg);
            });
        } else {
        }
      });
    },
    close: function () {
      this.$emit('closeChange', false);
    },
    // 广告
    getNotice() {
      feedbackDataApi()
        .then((res) => {
          this.notice = res.data.feedback;
        })
        .cache((err) => {
          this.$message.error(err.msg);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.maskModel {
  z-index: 7777 !important;
}
.on {
  opacity: 1 !important;
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
}
.pl15 {
  padding: 0 15px;
}
.sure {
  width: 100%;
  height: 480px;
  text-align: center;
  &-yuan {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: #55d443;
    margin: 54px auto;
    line-height: 70px;
  }
  .sp1 {
    color: #333333;
    font-size: 16px;
  }
  .sp2 {
    color: #999999;
    font-size: 13px;
  }
}
.feedback {
  position: fixed;
  width: 320px;
  height: 530px;
  border-radius: 2px;
  background-color: #fff;
  z-index: 9999;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -237px;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  &-header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    background: linear-gradient(270deg, #1890ff 0%, #3875ea 100%);
    align-items: center;
    justify-content: space-between;
    .sp1 {
      color: #fff;
      font-size: 16px;
    }
  }
  &-conent {
    padding: 15px;
    .ft {
      color: #333333;
      font-size: 13px;
    }
  }
}
</style>
